<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <!-- 
        事件修饰符：
        修饰符是对某条指令的补充
        .stop: 阻止事件的传播
        .capture: 让当前的事件在捕获的阶段执行
        .prevent: 阻止默认事件
        .self: 只有事件真正发生在自己身上的时候才会触发
        .once: 一次性事件,只会触发一次
     -->
    <div id="app">
      <div @click.self="myAlert('outer')">
        outer
        <div @click.capture="myAlert('inner')">
          inner
          <div @click="myAlert('content')">content</div>
        </div>
      </div>
      <br />
      <form action="###">
        <button @click.prevent.once="myAlert('点击了按钮')">按钮</button>
      </form>
      <br />

      <input type="text" @keyup.enter="myAlert('敲击键盘')" />
      <input type="text" @keyup.13="myAlert('敲击键盘')" />
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {};
    },
    methods: {
      myAlert(msg) {
        alert(msg);
      },
    },
  });
</script>
